<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="showHeatMap,addHeatMap" />
  <title>HERE Maps API Example: Instagram Locations Heat Map</title>
  <style>
  .loader {
    position: relative;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:black;
    background-color: rgba(0,0,0,0.5);
    background-image: url(img/ajax-loader.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }
  </style>
    <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>

  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript" 
    data-params="maps,datarendering" 
    data-map-container="mapContainer"
    data-callback="afterHereMapLoad" 
    data-libs="html-control"
    data-parent="demos/instagram-heat-map/">
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Instagram Locations Heat Map</h1>
  <p>This map shows a heatmap of locations people have taken photos and uploaded
    them to <a href="http://instagram.com">Instagram</a>.</p>
  <p>You can position the map anywhere, enter your 
    <a href="http://instagram.com/developer/register/#">Instagram Access Token</a>
    then press the Instagram button <img src="img/instagram-small.png"/> below to generate a new heatmap.
  </p>
  
  <div id="ticker" style="height: 2.0em; font-size: 2em; color: blue;">Enter Access Token</div>
  <p>
    <label for="instagram_access_token">Instagram Access Token:</label> 
    <input id="instagram_access_token" type="text" placeholder="Enter your access token" size="50" />
    <!--value="12203391.f59def8.e94d7c8122a6478cb0fd3e0dcd40de43" -->
    <img src="img/instagram.png" id="regram">
  </p>

  <div id="mapContainer" style="width:540px; height:334px;"></div>
  
<script>
//<![CDATA[
var map,
  htmlControl;

// We successfully found the user's location, lets move the map there
function foundUserLocation(location) {
  map.setCenter(location.coords);
}

// This will create a density-based heatmap highlighting the areas with the most photos
function addHeatMap(heatMapData) {
  $('#ticker').text('Creating Heat Map over ' + map.center);
  map.overlays.clear();
  var heatmap = new nokia.maps.heatmap.Overlay({
    max: 20,
    opacity: 0.8,
    type: "density",
    coarseness: 2
  });
  heatmap.addData(heatMapData);
  map.overlays.add(heatmap);
}


// This is the main core of our app
// We're going to ask the Instagram API to give us the 
// 500 most recent photos taken near the center of the map.
function showHeatMap(instagram_access_token) {
  $('.loader').show();

  // Send the request to Instagram
  $('#ticker').text("Making API request for " + map.center);
  $.get('https://api.instagram.com/v1/media/search?' +
    'lat=' + map.center.latitude + '&lng=' + map.center.longitude +
    '&access_token=' + instagram_access_token,
     function () {}, 'jsonp').done(function (data) {

    // Gather the locations of each of the photos Instagram gives us
    var heatMapData = [],
      len,
      i;
    if (data.data) {
      len = data.data.length;
      for (i = 0; i < len; i += 1) {
        heatMapData.push({
          'latitude': data.data[i].location.latitude,
          'longitude': data.data[i].location.longitude
        });
      }
    }
    if (heatMapData.length === 0) {
      $('#ticker').text('No data in response');
    } else {
      // Pass this data to our next function to draw a Heatmap of them
      addHeatMap(heatMapData);
    }

    // Hide our loading animation
    $('.loader').hide();
  });

}

function afterHereMapLoad(theMap) {
  map = theMap;
  htmlControl = new HtmlControl(
    '<div class=\'loader\' style=\'width:540px; height:334px; display:none\'></div>',
    'Loader'
  );
  map.components.add(htmlControl);
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(foundUserLocation);
  }

  $('#regram').on('click', function () {
    showHeatMap($('#instagram_access_token').val());
  });
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>
